<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name = "author" content="wyrQF">
        <meta name="keywords" content="CGI开发 H5模版 千锋教育 西安物联网">
        <title>引用js的三种方式</title>
        <link rel="stylesheet" href="/css/my.css">
    </head>
    <body>
        <!-- 在标签事件的脚步中，this代表的是标签本身的对象 
            onchange 表示 input输入的值发生了变化 同时input获取焦点的前提下，按回车触发 
        -->
       <input id="inputNum" type="text" placeholder="请输入1~10的整数" onchange="guest(this.value)">
        <button onclick="guest(inputNum.value)">猜一猜</button>
       <div id="ret"></div>
       <script>
        function guest(input_var){
            // console.log(input_var,typeof(input_var));
            // 将输入的值显示到div标签中  .innerHTML 以html的风格显示
            //  .innerText  以纯文本的方式显示
            // ret.innerHTML = input_var;

            // 随机产生一个整数
            Math.random(); // [0,1) 区间的小数
            // [1,10] 区间的整数
            let rnd_n = parseInt(Math.random() *10 + 1);
            
            let input_n = parseInt(input_var);

            if(rnd_n == input_n){
                ret.innerHTML = "恭喜中了100w大奖";
            }
            else{
                ret.innerHTML = "错了"
            }
        }
       </script>
    </body>
</html>
